<template>
	<view class="wrap">
		<u-card :head-style="headStyle" :head-border-bottom="false" :body-style="bodyStyle">
			<view class="store" slot="body">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
						:label-position="labelPosition" label="账号:" prop="account">
						<u-input :border="border" placeholder="请输入" v-model="model.account" type="text"></u-input>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
						:label-position="labelPosition" label="姓名:" prop="real_name">
						<u-input :border="border" placeholder="请输入" v-model="model.real_name" type="text"></u-input>
					</u-form-item>
					<u-form-item :border-bottom="false" :label-position="labelPosition" label="权限:" prop="roles"
						label-width="180">
						<u-input :border="border" type="select" :select-open="selectShow" v-model="model.roles"
							placeholder="请选择" @click="selectShow = true"></u-input>
					</u-form-item>

					<view class="submit_btn">
						<u-button @click="submit" shape="circle" class="btn" type="error">保存</u-button>
					</view>
				</u-form>

				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm">
				</u-select>

			</view>
		</u-card>

<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				bodyStyle: {
					padding: '10rpx 30rpx',
				},
				bodyStyle1: {
					padding: '14rpx',
				},
				headStyle: {
					padding: 0
				},
				admin_id:'',
				activeColor: '#000000',
				showLicensePlate: false,
				model: {
					real_name: '张三',
					account: '13544556688',
					roles: '管理员',
					status:1
				},
				roleList:[],
				showTime: false,
				selectList: [],
				rules: {
					account: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur',
						}

					],
					real_name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						}

					],
					roles: [{
						required: true,
						message: '请选择权限',
						trigger: 'change'
					}]

				},
				border: false,
				check: false,
				selectStatus: 'close',
				pickerShow: false,
				selectShow: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},
		onLoad(options) {
			var _this=this
			this.$u.api.getRoleList().then(res => {
				let {list} =res.data
				list.map((item,index)=>{
					console.log(item,'item')
					_this.selectList.push({
						value:item.role_name,
						label:item.role_name,
						id:item.id
					})
				})
				if (res.status == 200) {
					
				}
			})
			let obj=JSON.parse(options.obj)
			const {accout,real_name,roles,id}=obj
			this.model.accout=accout
			this.model.real_name=real_name
			this.model.roles=roles
			this.admin_id=id
			this.$u.api.getAdminList(options.id).then(res => {
				console.log(res)
				if (res.status == 200) {
					this.adminList = res.data.list
				}
			})
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.model.licensePlate += val;
				console.log(this.licensePlate);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.model.licensePlate.length) this.model.licensePlate = this.model.licensePlate.substr(0, this.model
					.licensePlate.length -
					1);
				console.log(this.model.licensePlate);
			},
			submit() {
				let _this=this
				_this.$u.api.editAdminList(this.admin_id,this.model).then(res => {
					console.log(res,'editAdminListeditAdminList')
					if (res.status == 200) {
						_this.$refs.uToast.show({
											title: res.msg,
											type: 'success',
											url: 'pages/employee_management/employee_management',
										})
					}
				})
				// this.$refs.uForm.validate(valid => {
				// 	console.log(_this.admin_id,1111111111)
					
				// 	// if (valid) {
				// 	// 	this.$u.api.editAdminList(admin_id).then(res => {
				// 	// 		console.log(res,'editAdminListeditAdminList')
				// 	// 		if (res.status == 200) {
								
				// 	// 		}
				// 	// 	})

				// 	// 	console.log('验证通过');
				// 	// } else {
				// 	// 	console.log('验证失败');
				// 	// }
				// });
			},


			// 选择商品类型回调
			selectConfirm(e) {
				this.model.roles = '';
				console.log(this.model)
				e.map((val, index) => {
					this.model.roles += this.model.roles == '' ? val.label : '-' + val.label;
				})
			},

			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},

			errorChange(index) {
				if (index == 0) this.errorType = ['message'];
				if (index == 1) this.errorType = ['toast'];
				if (index == 2) this.errorType = ['border-bottom'];
				if (index == 3) this.errorType = ['border'];
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		// padding: 30rpx;
		text-align: center;

		.del_btn {
			color: red;
		}

		.submit_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 18rpx;
			background: #fff;

			.btn button {
				background: #eb3626 !important;
			}
		}
	}
</style>
